<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车 - DTcms网站管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>

    <script>
        // 用户未登录,则中转到登录界面
        let token = sessionStorage.token || localStorage.token;
        if (!token) {
            location.href = '/login.html';
        }
    </script>

</head>

<body>

<!--页面头部-->
<div id="header"></div>
<script>$("#header").load("_header.html");</script>
<!--/页面头部-->

<!--当前位置-->
<div class="section">
    <div class="location">
        <span>当前位置：</span>
        <a href="index.html">首页</a> &gt;
        <a href="cart.html">购物车</a>
    </div>
</div>
<!--/当前位置-->
<div id="app">

    <!--页面内容-->
    <div class="section">
        <div class="wrapper">
            <div class="bg-wrap">
                <!--购物车头部-->
                <div class="cart-head clearfix">
                    <h2><i class="iconfont icon-cart"></i>我的购物车</h2>
                    <div class="cart-setp">
                        <ul>
                            <li class="first active">
                                <div class="progress">
                                    <span>1</span>
                                    放进购物车
                                </div>
                            </li>
                            <li>
                                <div class="progress">
                                    <span>2</span>
                                    填写订单信息
                                </div>
                            </li>
                            <li class="last">
                                <div class="progress">
                                    <span>3</span>
                                    支付/确认订单
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--购物车头部-->

                <!--商品列表-->
                <div class="cart-box">
                    <input id="jsondata" name="jsondata" type="hidden"/>
                    <table width="100%" align="center" class="cart-table"
                           border="0" cellspacing="0" cellpadding="8">

                        <tr>
                            <th width="48" align="center">
                            </th>
                            <th align="left" colspan="2">商品信息</th>
                            <th width="84" align="left">单价</th>
                            <th width="104" align="center">数量</th>
                            <th width="104" align="left">金额(元)</th>
                            <th width="54" align="center">操作</th>
                        </tr>

                        <!-- 第1条数据 -->
                        <tr v-for="(goods, index) in goods_list" v-cloak>
                            <td align="center">
                                <input type="checkbox" name="checkall" class="checkall"
                                       v-model="goods.selected"/>
                            </td>
                            <td width="68">
                                <a target="_blank" href="/goods/show-98.html">
                                    <img :src="goods.img_url" class="img"/>
                                </a>
                            </td>
                            <td>
                                <a target="_blank" :href="'goods_detail.html?id=' + goods.id">{{ goods.title }}</a>
                            </td>
                            <td>
                                ￥{{ goods.sell_price }}
                            </td>
                            <td align="center">
                                <div class="buy-box">
                                    <a href="javascript:;" class="reduce" @click="on_minus(index)">-</a>
                                    <input type="text" name="goodsQuantity" class="input" v-model="goods.count"
                                           @blur="on_input(index)" @focus="origin_input=goods.count"
                                           onkeydown="return checkNumber(event);"/>
                                    <a href="javascript:;" class="subjoin" @click="on_add(index)">+</a>
                                </div>
                            </td>

                            <td>
                            <span class="red">
                                ￥<label name="amountCount">{{ goods.amount }}</label>
                            </span>
                            </td>
                            <td align="center">
                                <a @click="delete_goods(index)" href="javascript:;">删除</a>
                            </td>
                        </tr>

                        <tr v-if="goods_list.length === 0">
                            <td colspan="10">
                                <div class="msg-tips">
                                    <div class="icon warning"><i class="iconfont icon-tip"></i></div>
                                    <div class="info">
                                        <strong>购物车没有商品！</strong>
                                        <p>您的购物车为空，<a href="/index.html">马上去购物</a>吧！</p>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr class="table-footer">
                            <th align="left" colspan="3">
                                <input type="checkbox" class="check_all"
                                       v-model="select_all" @click="on_select_all()"/>
                                <label>全选</label>
                            </th>
                            <th align="right" colspan="8">
                                已选择商品 <b class="red" id="totalQuantity">{{ selected_count }}</b> 件 &nbsp;&nbsp;&nbsp;
                                商品总金额（不含运费）：<span class="red">￥</span>
                                <b class="red" id="totalAmount">{{ selected_amount }}</b>元
                            </th>
                        </tr>

                    </table>
                </div>
                <!--/商品列表-->

                <!--购物车底部-->
                <div class="cart-foot clearfix">
                    <div class="left-box">
                    </div>
                    <div class="right-box">
                        <button class="submit">立即结算</button>
                    </div>
                </div>
                <!--购物车底部-->

            </div>
        </div>
    </div>
    <!--/页面内容-->
</div>

<!--页面底部-->
<div id="footer"></div>
<script>$("#footer").load("_footer.html");</script>
<!--/页面底部-->

<script src="js/axios-0.18.0.min.js"></script>
<script src="js/vue-2.5.16.js"></script>
<script src="js/cart.js"></script>

</body>
</html>